<template>
	<view class="content">
		<view class="head">
			<image src="../../static/headBack.png" mode="aspectFit"></image>
		</view>
		<view class="detail">
			<view class="list bottom">
				<view class="title">
					收费单位
				</view>
				<view class="label">
					临颍县盛宏热力有限公司
				</view>
			</view>
			<view class="list bottom">
				<view class="title">
					缴费户号
				</view>
				<view class="label">
					{{detail.number}}
				</view>
			</view>
			<view class="list bottom">
				<view class="title">
					缴费金额
				</view>
				<view class="label">
					{{detail.money}}
				</view>
			</view>
			<view class="list bottom">
				<view class="title">
					户名
				</view>
				<view class="label">
					{{detail.user_name}}
				</view>
			</view>
			<view class="list bottom">
				<view class="title">
					详细住址
				</view>
				<view class="label">
					{{detail.address}}
				</view>
			</view>
			<view class="list">
				<view class="title">
					缴费项目
				</view>
				<view class="label">
					{{detail.project_name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				id: -1,
				detail: {
					address: "测试小区1号楼101",
					money: "100.00",
					number: "000001",
					pay_time: "2021-09-26 18:15",
					project_name: "项目名称",
					user_name: "张三"
				}
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.load();
		},
		methods:{
			async load(){
				let res = await this.api.uniRequ(this.api.public.order_info,{id: this.id});
				if(res.code == 1){
					this.detail = res.data
				}
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		width: 88%;
		padding: 40rpx 3%;
		background-color: #FFFFFF;
		position: relative;
		z-index: 1;
		left: 3%;
		top: -150rpx;
		box-shadow: 0px -5rpx 20rpx rgba(0, 0, 0, 0.1);
		.list{
			width: 100%;
			// height: 37rpx;
			line-height: 37rpx;
			padding: 30rpx 0;
			font-size: 26rpx;
			display: flex;
			.title{
				width: 20%;
				color: #262628;
			}
			.label{
				width: 80%;
				text-align: right;
				color: #707080;
			}
		}
		.bottom{
			border-bottom: 1px solid #EFEFF4;
		}
	}
</style>
